<template>
    <div>
        <div class="login-wrap">
            <el-form
                class="login-content"
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
            >
                <el-form-item label="输入帐号" prop="userName">
                    <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="输入密码" prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                </el-form-item>
                <div class="login-btn">
                    <el-button
                        type="primary"
                        :loading="loading"
                        @click="submit('ruleForm')"
                        size="large"
                    >{{ buttonText }}</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    name: 'login',

    data() {
        let userName = (rule, value, callback) => {
                if (value === '') {
                    return callback(new Error('帐号不能为空'));
                } else {
                    callback();
                }
            },
            password = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else {
                    callback();
                }
            };
        return {
            loading: false,
            buttonText: '登 录',
            ruleForm: {
                userName: '',
                password: ''
            },
            rules: {
                userName: [{ validator: userName, trigger: 'blur' }],
                password: [{ validator: password, trigger: 'blur' }]
            }
        };
    },

    methods: {
        submit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    this.$localStore.set('Token', 'test');
                    this.$router.push({
                        path: '/'
                    });
                    console.log('登录成功');
                } else {
                    return false;
                }
            });
        }
    }
};
</script>

<style lang="scss" scoped>
.login-wrap {
    width: 100vw;
    height: 100vh;
    background-color: rgb(32, 160, 255);
    display: flex;
    align-items: center;
    justify-content: center;
    .login-content {
        height: 256px;
        border-radius: 6px;
        background-color: #fff;
        padding: 10px 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .login-btn {
            margin-top: 20px;
            button {
                width: 100%;
            }
        }
    }
}
</style>
